<template>
  <div class="page-Body">
    <h2 class="page-title">活动成员管理</h2>
    <!-- 表单 -->
    <el-form :inline="true" :model="formInline">
      <el-form-item label="用户昵称">
        <el-input
          v-model="formInline.nickName"
          placeholder="请输入用户昵称"
          clearable
          style="width: 170px"
          v-noSpace
        />
      </el-form-item>
      <el-form-item label="票种分类">
        <el-select
          v-model="formInline.ticketId"
          clearable
          placeholder="请选择票种分类"
          style="width: 170px"
        >
          <el-option
            v-for="item in ticketTypeList"
            :key="item.activityId"
            :label="item.ticketName"
            :value="item.ticketId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="票种状态">
        <el-input
          v-model="formInline.ticketStatus"
          placeholder="请输入票种状态"
          clearable
          v-noSpace
          style="width: 170px"
        />
      </el-form-item>
      <el-form-item label="开始时间">
        <el-input
          v-model="startDate"
          placeholder="请输入开始时间"
          clearable
          v-noSpace
          style="width: 170px"
        />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-input
          v-model="endDate"
          placeholder="请输入结束时间"
          clearable
          v-noSpace
          style="width: 170px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="Search">搜索</el-button>
        <el-button @click="Reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      stripe
      fit
      empty-text="暂无数据"
      show-header
      v-loading="loading"
      size="default"
      element-loading-text="Loading..."
      :header-cell-style="{ background: '#e7e1fb' }"
      style="width: 100%"
      max-height="650px"
    >
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="uid" label="用户ID" />
      <el-table-column prop="nickName" label="用户昵称">
        <template v-slot="scope">
          <el-button link type="primary" @click="MemberDetails(scope.row)">
            {{ scope.row.nickName }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="手机号" />
      <el-table-column prop="roleStr" label="成员身份" />
      <el-table-column prop="ticketName" label="票种类型" v-slot="scope">
        {{ scope.row.ticketName + '￥' + scope.row.cost }}
      </el-table-column>
      <el-table-column prop="redeemStatusStr" label="票种状态">
        <template #default="scope">
          <span :style="{ color: StatusColor(scope.row.redeemStatusStr) }">
            {{ scope.row.redeemStatusStr }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="pagination-block">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 40, 80, 100]"
        background
        layout="total,sizes, prev, pager, next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 成员详情对话框 -->
    <MembersDetails_Dialog
      :dialogDetails="dialogDetails"
      :activityrow="activityrow"
      @cancel="handleClose"
    />
  </div>
</template>

<script setup name="activity">
import {
  getActivityMember,
  getActivityTicketTypeList,
} from '@/api/Activity/ActivityMent.js';
import MembersDetails_Dialog from '@/components/Activity/ActivityMent/MemberDetail_Dialog.vue';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
// 分页变量
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
// 表单数据
const formInline = ref({
  nickName: '',
  ticketId: '',
  ticketStatus: '',
});
const startDate = ref('');
const endDate = ref('');

// 对话框
const dialogDetails = ref(false);
const activityrow = ref({});
// 列表数据+表单校验
const tableData = ref([]);
const loading = ref(true);
// 分页逻辑
const handleSizeChange = async (val) => {
  pageSize.value = val;
  ActivityMember();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  ActivityMember();
};
// 获取列表
const ActivityMember = async () => {
  loading.value = true;
  // let b = '1881653104413347841';
  const res = await getActivityMember({
    current: currentPage.value,
    size: pageSize.value,
    startDate: startDate.value,
    endDate: endDate.value,
    query: { ...formInline.value, activityId: route.params.id },
  });
  if (res.data.code === 200) {
    tableData.value = res.data.data.items;
    total.value = res.data.data.current || 0;
    loading.value = false;
  }
};
// 搜索校验
const hasSearchConditions = () => {
  const { nickName, ticketId, ticketStatus } = formInline.value;
  return (
    nickName || ticketId || ticketStatus || startDate.value || endDate.value
  );
};
// 搜索
const Search = async () => {
  if (!hasSearchConditions()) {
    // eslint-disable-next-line no-undef
    ElMessage({
      message: '请至少输入一个搜索条件或选择时间范围',
      type: 'warning',
    });
    return;
  }
  ActivityMember();
};
// 重置
const Reset = () => {
  // 如果当前已经是空值状态，直接返回
  if (
    formInline.value.nickName === '' &&
    formInline.value.ticketId === '' &&
    formInline.value.ticketStatus === '' &&
    startDate.value === '' &&
    endDate.value === ''
  ) {
    return;
  }
  formInline.value = {};
  startDate.value = '';
  endDate.value = '';
  ActivityMember();
};

// 获取票种状态颜色
const StatusColor = (status) => {
  switch (status) {
    case '待检票':
      return '#FFAE35 ';
    default:
      return '#303133';
  }
};
// 成员详情对话框
const MemberDetails = (row) => {
  dialogDetails.value = true;
  activityrow.value = row;
};
const handleClose = () => {
  dialogDetails.value = false;
};
// 票种分类列表
const ticketTypeList = ref([]);
// 获取票种分类下拉
const ActivityTicketTypeList = async () => {
  const res = await getActivityTicketTypeList(route.params.id);
  if (res.data.code === 200) {
    ticketTypeList.value = res.data.data || [];
  }
};
onMounted(() => {
  ActivityMember();
  ActivityTicketTypeList();
});
</script>

<style lang="scss" scoped></style>
